<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>DOM Level 1</title>
	</head>
	<body>
		<div id="rootDiv">
			<div id="firstChildDiv">First Child Div</div>
			<div id="secondChildDiv">Second Child Div</div>
			<div id="lastChildDiv">
				Last Child Div
				<div id="innerDiv1">Inner Div</div>
				<div id="innerDiv2">
					<input type="button" id="btn1" onclick="alert('clicked!');" value="按钮1">
				</div>
				<a href="domlevel1.html">This Page</a>
			</div>
		</div>
		<script>
			// document的子元素
			console.log("document对象的子元素：");
			for(var i=0;i<document.childNodes.length;i++){
				var node = document.childNodes[i];
				console.log(node.nodeType + ":" + node.nodeName + ":" + node.nodeValue);
			}
			
			// document.documentElement对象的子元素(实际上就是<html>元素)：
			// 空白符或换行符将会作为一个TEXT文本存在
			console.log("document.documentElement对象的子元素：");
			for(var i=0;i<document.documentElement.childNodes.length;i++){
				var node = document.documentElement.childNodes[i];
				console.log(node.nodeType + ":" + node.nodeName + ":" + node.nodeValue);
			}
			
			// body对象的子元素：
			console.log("body对象的子元素：");
			for(var i=0;i<document.body.childNodes.length;i++){
				var node = document.body.childNodes[i];
				console.log(node.nodeType + ":" + node.nodeName + ":" + node.nodeValue);
			}
			
			// 将NodeList转换成数组
			console.log("NodeList转换成数组访问：");
			var nodeArray = Array.prototype.slice.call(
				document.getElementById("rootDiv").childNodes,
				0);
			for(var i=0;i<nodeArray.length;i++){
				var node = nodeArray[i];
				console.log(node.nodeType + ":" + node.id + ":" + node.nodeValue);
			}
			
			// ownerDocument属性
			console.log("ownerDocument属性：");
			var doc = document.getElementById("firstChildDiv").ownerDocument;
			console.log(doc.nodeName);
			
			// cloneNode
			var btn2 = document.getElementById("btn1").cloneNode();
			btn2.value = "按钮2";
			btn2.id = "btn2";
			document.getElementById("innerDiv2").appendChild(btn2);
			
			// document对象常用属性
			document.write("title:", document.title);
			document.write("<br/>");
			document.write("url:",document.URL);
			document.write("<br/>");
			document.write("domain:", document.domain);
			document.write("<br/>");
			document.write("referrer:", document.referrer);
			document.write("<br/>");
		</script>
	</body>
</html>
